﻿<%@ Page Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true"
    CodeBehind="TrailDetails.aspx.cs" Inherits="Imageo.ui.TrailDetails" %>

<%@ Register Src="../controls/TrailGMap.ascx" TagName="TrailGMap" TagPrefix="bintje" %>
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContentPlaceholder" runat="Server">

    <script type="text/javascript">
        var ZoomImageTitle;
        function ZoomImage(sender) {
            $("#dialogZoomImage").dialog({
                resizable: false,
                title: ZoomImageTitle,
                height: $(window).height() - 150,
                width: $(window).width() - 150,
                modal: true,
                buttons: null
            });
        }
    </script>

</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContentPlaceholder" runat="Server">
    <asp:HiddenField ID="hfUploadedFiles" runat="server" />
    <asp:HiddenField ID="hfProUserId" runat="server" />
    <div id="dialog-deletetrail-confirm" title="Trail" style="display: none;">
        <p>
            Are you sure do you want to delete this trail?</p>
    </div>
    <div id="dialogZoomImage" title="Image" style="display: none;">
        <div id="div2" runat="server" style="width: 100%; height: 100%; background-color: Black;
            vertical-align: middle; text-align: center; vertical-align: middle;">
            <a id="A1" runat="server" href="">
                <asp:Image runat="server" ID="imgImage2" ImageUrl="~/images/photo_not_available.jpg"
                    Style="max-width: 100%; max-height: 100%;" />
            </a>
        </div>
    </div>
    <div id="dialog-deletephoto-confirm" title="Photos" style="display: none; text-align: center;">
        <div id="div1" runat="server" style="width: 375px; height: 250px;">
            <asp:Image runat="server" ID="imgDeletePic" ImageUrl="~/images/photo_not_available.jpg"
                Style="max-width: 100%; max-height: 100%;" />
        </div>
        <br />
        <div style="text-align: center">
            Are you sure you want to delete this photo?
        </div>
    </div>
    <div id="dialog-addphoto-confirm" title="Photos" style="display: none;">
        <iframe id="ifrUpload" src="FileUpload.aspx" frameborder="0" width="400" height="100"
            style="overflow: hidden">
            <p>
                Your browser does not support iframes. This is required to upload files</p>
        </iframe>
    </div>
    <table runat="server" id="tblCreateOptions" width="100%" style="text-align: right">
        <tr>
            <td>
                <a id="lnkEasyTrail" runat="server">Switch to EasyTrail Mode</a>
            </td>
        </tr>
    </table>
    <table runat="server" id="tblViewEditOptions" width="100%" style="text-align: right">
        <tr>
            <td>
                <a id="lnkEdit" runat="server">Edit Trail</a> &nbsp;|&nbsp;
                <asp:LinkButton ID="btnDelete1" runat="server" OnClientClick="dialogDeleteTrail(); return false;">Delete Trail</asp:LinkButton>
            </td>
        </tr>
    </table>
    <table runat="server" id="tblEditOptions" width="100%" style="text-align: right">
        <tr>
            <td>
                <a id="lnkView" runat="server">View Trail</a> &nbsp;|&nbsp;
                <asp:LinkButton ID="btnDelete2" runat="server" OnClientClick="dialogDeleteTrail(); return false;">Delete Trail</asp:LinkButton>
            </td>
        </tr>
    </table>
    <table width="100%" style="text-align: left;">
        <tr style="vertical-align: top;">
            <td>
                <div id="divEditTitle" runat="server" class="pnlCurvyWhite" style="height: 130px;">
                    <table width="100%">
                        <tr>
                            <td width="100%">
                                <asp:TextBox ID="txtTrailTitle" runat="server" Width="95%" CssClass="blueTitle flatTextBox"></asp:TextBox>
                            </td>
                            <td>
                                <asp:CheckBox ID="chkIsPublic" runat="server" Width="100px" Text="Is Public" Checked="true" />
                            </td>
                        </tr>
                        <tr>
                            <td colspan="2">
                                <asp:TextBox ID="txtTrailDescription" CssClass="flatTextBox" runat="server" Width="100%"
                                    Height="90px" TextMode="MultiLine" Text=""></asp:TextBox>
                            </td>
                        </tr>
                    </table>
                </div>
                <div id="divViewTitle" runat="server" class="pnlCurvyWhite" style="height: 130px;">
                    <table width="100%">
                        <tr>
                            <td width="100%">
                                <asp:Label ID="lblTrailTitle" runat="server" Width="100%" CssClass="blueTitle"></asp:Label>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <asp:Label ID="lblTrailDescription" runat="server" Width="100%" Height="100px" TextMode="MultiLine"
                                    Style="overflow: auto" Text="Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."></asp:Label>
                            </td>
                        </tr>
                    </table>
                </div>
            </td>
            <td width="400px;">
                <asp:UpdatePanel runat="server" ID="pnlEditRightDetails">
                    <ContentTemplate>
                        <div id="divEditRightDetails" runat="server" class="pnlCurvyWhite" style="height: 130px;">
                            <table>
                                <tr style="vertical-align: top">
                                    <td>
                                        <div id="divEasyMode" runat="server" visible="false" style="color: Red; font-weight: bold">
                                            Easy mode is active</div>
                                        <table id="tblTrailDetails" runat="server">
                                            <tr>
                                                <td>
                                                    City:
                                                </td>
                                                <td>
                                                    <asp:TextBox ID="txtTrailCity" Width="100px" runat="server" CssClass="flatTextBox"></asp:TextBox>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    Created:
                                                </td>
                                                <td>
                                                    <asp:TextBox ID="txtDate" Width="100px" runat="server" CssClass="flatTextBox"></asp:TextBox>
                                                </td>
                                            </tr>
                                        </table>
                                    </td>
                                    <td>
                                        <select id="sltLayers" width="130px" multiple="true" title="Layers" runat="server"
                                            class="flatTextBox">
                                        </select>
                                    </td>
                                </tr>
                            </table>
                        </div>
                        <div id="divViewRightDetails" runat="server" class="pnlCurvyWhite" style="height: 130px;">
                            <table width="100%">
                                <tr style="vertical-align: top">
                                    <td>
                                        Author:&nbsp;&nbsp;
                                        <asp:Label ID="lblAuthor" runat="server">Author</asp:Label>
                                        <br />
                                        <asp:Label ID="lblTrailCity" runat="server">City</asp:Label>,
                                        <asp:Label ID="lblTrailCountry" runat="server">Country</asp:Label>
                                        <br />
                                        Layers:
                                        <asp:Label ID="lblTrailLayers" runat="server"></asp:Label><br />
                                        Estimated Lenght:
                                        <asp:Label ID="lblTrailLenght" runat="server">10.2</asp:Label>
                                        km<br />
                                        Number of sites:
                                        <asp:Label ID="lblTrailWaypointNumber" runat="server">10</asp:Label>
                                        <br />
                                        Created:
                                        <asp:Label ID="lblDate" Width="100px" runat="server"></asp:Label>
                                    </td>
                                    <td style="width: 120px;" runat="server" id="tdComments">
                                        <a href="#divComments">
                                            <asp:Label ID="lblTrailCommentsNumber" runat="server">0</asp:Label>
                                            <span>&nbsp;comments to this trail. Read below</span> </a>
                                        <br />
                                    </td>
                                </tr>
                            </table>
                        </div>
                    </ContentTemplate>
                    <Triggers>
                        <asp:PostBackTrigger ControlID="btnSendComment" />
                    </Triggers>
                </asp:UpdatePanel>
            </td>
        </tr>
        <tr style="vertical-align: top">
            <td style="height: 475px">
                <bintje:TrailGMap ID="gmapTrails" runat="server" OnSubmitEvent="btnSubmit_Click"
                    MapMode="viewMode" Width="100%" Height="475px"></bintje:TrailGMap>
            </td>
            <td width="400px" style="height: 510px">
                <div class="pnlCurvyWhite">
                    <div style="width: 380px; height: 270px; background: black; text-align: center; vertical-align: middle;">
                        <div id="divPic" runat="server" style="width: 380px; height: 270px;">
                            <div style="position: relative; top: 0px; left: 0px; z-index: 100; width: 380px;
                                height: 25px;">
                                <div style="float: left; position: relative;">
                                    <asp:ImageButton runat="server" ID="ImageButton1" ImageUrl="~/images/left.png" Width="25"
                                        Height="25" Style="z-index: 10;" OnClientClick='SelectPrev(); return false;' />
                                </div>
                                <div style="float: right; position: relative;">
                                    <asp:ImageButton runat="server" ID="ImageButton3" ImageUrl="~/images/right.png" Width="25"
                                        Height="25" Style="z-index: 10;" OnClientClick='SelectNext(); return false;' />
                                </div>
                            </div>
                            <asp:Image runat="server" ID="imgDetailsPicture" ImageUrl="~/images/photo_not_available.jpg"
                                Style="margin-top: -25px; max-width: 100%; max-height: 100%; z-index: 10;" />
                            <asp:ImageButton runat="server" ID="btnZoomImage" ImageUrl="~/images/zoom.png" Width="20"
                                Height="20" Style="margin-left: -20px; z-index: 100;" OnClientClick='ZoomImage(this); return false;' />
                        </div>
                        <div id="divPicCommands" runat="server">
                            <button id="btnAddPic" runat="server" onclick="dialogAddPhoto(); return false;">
                                Add Photos</button>
                            <button id="btnDelPic" runat="server" onclick="dialogDeletePhoto(); return false; ">
                                Delete Photo</button>
                        </div>
                    </div>
                    <a id="lnkSimilarTrails" runat="server"><span>Find similar trails</span> </a>| <a
                        id="lnkSimilarImages" runat="server"><span>Similar Images</span> </a>
                    <div id="divWaypointDetailsSelected" runat="server" style="height: 198px;">
                        <span class="blueSmallTitle">Number </span>
                        <asp:Label ID="lblWaypointNumber" runat="server" CssClass="blueSmallTitle">1</asp:Label>
                        <span class="blueSmallTitle">: </span>
                        <asp:Label ID="lblWaypointTitle" runat="server" CssClass="blueSmallTitle">Waypoint Title</asp:Label>
                        <span class="blueTitle">
                            <br />
                        </span>
                        <asp:TextBox ID="txtWaypointDescription" Width="95%" Height="170px" TextMode="MultiLine"
                            runat="server" CssClass="flatTextBox"></asp:TextBox>
                        <asp:Label ID="lblWaypointDescription" runat="server" Height="170px" TextMode="MultiLine"
                            Style="overflow: auto">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</asp:Label>
                    </div>
                    <div id="divWaypointDetailsUnselected" runat="server" style="height: 198px; display: none;">
                        <span class="arial_bold_link">No waypoint has been selected </span>
                    </div>
                </div>
            </td>
        </tr>
    </table>
    <table width="100%">
        <tr>
            <td align="center">
                <asp:HiddenField ID="hfDeleteTrailUrl" runat="server" />
                <div id="divCarouselPics" class="detailBoxes">
                    <ul id="mycarousel" runat="server" class="jcarousel-skin-tango">
                        <!-- The content will be dynamically loaded in here -->
                    </ul>
                </div>
            </td>
        </tr>
    </table>
    <asp:UpdatePanel ID="pnlComments" runat="server">
        <ContentTemplate>
            <table id="tblComments" runat="server" width="100%">
                <tr id="rowComments" style="height: 180px;" align="left">
                    <td align="left" style="height: 150px">
                        <div id="divComments" class="pnlCurvyWhite" style="height: 150px">
                            <span class="blueTitle">Comments</span><br />
                            <asp:ListView ID="lstComments" runat="server" OnPagePropertiesChanged="lstComments_PagePropertiesChanged">
                                <EmptyDataTemplate>
                                    Please send your comments!
                                </EmptyDataTemplate>
                                <LayoutTemplate>
                                    <table id="tblLayout" runat="server" width="100%">
                                        <tr id="Tr1" runat="server">
                                            <td id="Td1" runat="server">
                                                <table id="groupPlaceholderContainer" width="100%" runat="server" border="0" style="font-family: Verdana, Arial, Helvetica, sans-serif;">
                                                    <tr id="groupPlaceholder" runat="server" align="left">
                                                    </tr>
                                                </table>
                                            </td>
                                        </tr>
                                        <tr id="Tr2" runat="server">
                                            <td id="Td2" runat="server" style="text-align: center; background-color: #5D7B9D;
                                                font-family: Verdana, Arial, Helvetica, sans-serif;">
                                                Pages:
                                                <asp:DataPager ID="DataPager1" runat="server" PageSize="3">
                                                    <Fields>
                                                        <asp:NumericPagerField />
                                                    </Fields>
                                                </asp:DataPager>
                                            </td>
                                        </tr>
                                    </table>
                                </LayoutTemplate>
                                <EmptyItemTemplate>
                                    <td id="Td3" runat="server" />
                                </EmptyItemTemplate>
                                <ItemTemplate>
                                    <td id="Td4" runat="server" align="left">
                                        <p>
                                            <%# Eval("comment") %></p>
                                        <p class="normal_font_blue_11">
                                            <b>
                                                <%# Eval("name") %></p>
                                        </b> </p>
                                    </td>
                                </ItemTemplate>
                                <GroupTemplate>
                                    <tr id="itemPlaceholderContainer" runat="server">
                                        <td id="itemPlaceholder" runat="server">
                                        </td>
                                    </tr>
                                </GroupTemplate>
                            </asp:ListView>
                        </div>
                    </td>
                    <td id="tdNewComment" width="400" runat="server">
                        <div class="pnlCurvyWhite" style="height: 150px">
                            <span class="blueTitle">Add Comment</span>
                            <br />
                            <asp:TextBox ID="txtComment" runat="server" class="flatTextBox" Width="360" TextMode="MultiLine"
                                Height="100px"></asp:TextBox>
                            <br />
                            <div style="text-align: right">
                                <asp:Button ID="btnSendComment" runat="server" Text="Send" OnClick="btnSendComment_Click" />
                            </div>
                        </div>
                    </td>
                    <td id="tdLoginToComment" width="400" runat="server">
                        <div class="pnlCurvyWhite" style="height: 150px">
                            <p style="color: Red; font-weight: bold">
                                You must login to submit a comment
                            </p>
                        </div>
                    </td>
                </tr>
            </table>
        </ContentTemplate>
        <Triggers>
            <asp:PostBackTrigger ControlID="btnSendComment" />
        </Triggers>
    </asp:UpdatePanel>

    <script type="text/javascript">
        var mycarousel;
        var lastUploadedFileUrl;
        var uploadedFilesArray;
        var currentWpIdx;
        var currentWpImgIdx;

        function mycarousel_updateAllItems() {
            // First calculate scroll
            var carIdx = 0;
            while (carIdx < wpImgArray.length && wpImgArray[carIdx].wpIdx != currentWpIdx) carIdx++;
            if (carIdx >= wpImgArray.length) return;

            carIdx += currentWpImgIdx;
            carIdx++;       // the start frame is 1

            var scrollIdx = carIdx;

            if (carIdx < mycarousel.first) {
                scrollIdx = carIdx;
                mycarousel.scroll(scrollIdx, true);
            }

            if (carIdx > mycarousel.last) {
                scrollIdx = carIdx - 9;
                mycarousel.scroll(scrollIdx, true);
            }

            // Update markers        
            for (var i = mycarousel.first; i <= mycarousel.last; i++) {
                var wpIdx = $("#carImg" + i).data('wpIdx');

                if (currentWpIdx == wpIdx)
                    $("#carDiv" + i).css('background-color', 'red');
                else
                    $("#carDiv" + i).css('background-color', '');
            }
        }

        function SelectNext() {
            var carIdx = 0;
            while (carIdx < wpImgArray.length && wpImgArray[carIdx].wpIdx != currentWpIdx) carIdx++;
            if (carIdx >= wpImgArray.length) return;
            carIdx += currentWpImgIdx;
            carIdx++;
            if (carIdx >= wpImgArray.length) return;

            currentWpIdx = wpImgArray[carIdx].wpIdx;
            currentWpImgIdx = wpImgArray[carIdx].wpImgIdx;

            functionUpdateWaypointInfo();
            mycarousel_updateAllItems();                 
        }

        function SelectPrev() {
            var carIdx = 0;
            while (carIdx < wpImgArray.length && wpImgArray[carIdx].wpIdx != currentWpIdx) carIdx++;
            if (carIdx >= wpImgArray.length) return;
            carIdx += currentWpImgIdx;
            carIdx--;
            if (carIdx < 0) return;

            currentWpIdx = wpImgArray[carIdx].wpIdx;
            currentWpImgIdx = wpImgArray[carIdx].wpImgIdx;

            functionUpdateWaypointInfo();
            mycarousel_updateAllItems();                 
        }

        function mycarousel_updateItem(i) {
            var item = wpImgArray[i - 1];
            $("#carImg" + i).attr('src', item.url.replace("type=image", "type=thumb"));
            $("#carImg" + i).attr('title', item.name);
            $("#carImg" + i).attr('alt', item.name);
            $("#carImg" + i).data('wpIdx', item.wpIdx);
            $("#carImg" + i).data('wpImgIdx', item.wpImgIdx);

            $("#carImg" + i).click(function() {
                var wpIdx = $(this).data('wpIdx');
                var wpImgIdx = $(this).data('wpImgIdx');
                currentWpIdx = wpIdx;
                currentWpImgIdx = wpImgIdx;
                functionUpdateWaypointInfo();
                mycarousel_updateAllItems();
            });
        }

        function mycarousel_itemLoadCallback(carousel, state) {
            mycarousel = carousel;
            for (var i = carousel.first; i <= carousel.last; i++) {
                if (!carousel.has(i)) {
                    if (i > wpImgArray.length) break;
                    var htmlImg = '<div id="carDiv' + i + '" style="position: relative; width:76px; height:76px;"><img width="70" height="70" id="carImg' + i + '" style="position: absolute; left: 50%; top: 50%; margin-left: -35px; margin-top: -35px;" /></div>'
                    carousel.add(i, htmlImg);
                    mycarousel_updateItem(i);
                }
            }
        };

        function dialogDeleteTrail() {
            $("#dialog-deletetrail-confirm").dialog({
                resizable: false,
                height: 180,
                modal: true,
                buttons: {
                    'Delete': function() {
                        var hfDeleteTrailUrl = document.getElementById('<%=hfDeleteTrailUrl.ClientID %>');
                        window.location = hfDeleteTrailUrl.value;
                        $(this).dialog('close');
                    },
                    Cancel: function() {
                        $(this).dialog('close');
                    }
                }
            });
        }

        function dialogDeletePhoto() {
            $("#dialog-deletephoto-confirm").dialog({
                resizable: false,
                width: 400,
                modal: true,
                buttons: {
                    'Delete': function() {
                        if (jsonTrailData != null) {
                            if (currentWpImgIdx >= 0 && currentWpIdx >= 0) {
                                jsonTrailData[0].waypointsField[currentWpIdx].imagesField.splice(currentWpImgIdx, 1);

                                if (currentWpImgIdx > 0)
                                    currentWpImgIdx--;
                                else {
                                    if (jsonTrailData[0].waypointsField[currentWpIdx].imagesField.length > 0)
                                        currentWpImgIdx = 0;
                                    else
                                        currentWpImgIdx = -1;
                                }

                                collectPictures();
                                mycarousel.reset();
                                if (functionUpdateWaypointInfo) {
                                    functionUpdateWaypointInfo();
                                }
                            }
                        }
                        $(this).dialog('close');
                    },
                    Cancel: function() {
                        $(this).dialog('close');
                    }
                }
            });
        }

        functionCloseFileUploadDialog = function() {
            $("#dialog-addphoto-confirm").dialog('close');
        }

        functionFileUploaded = function(fileUrlArray) {
            if (fileUrlArray) {
                for (var i = 0; i < fileUrlArray.length; i++) {
                    uploadedFilesArray.push(fileUrlArray[i]);
                    lastUploadedFileUrl = fileUrlArray[i];

                    if (lastUploadedFileUrl != null) {
                        if (jsonTrailData[0].waypointsField[currentWpIdx].imagesField == null)
                            jsonTrailData[0].waypointsField[currentWpIdx].imagesField = new Array();

                        var tmpImgArray = jsonTrailData[0].waypointsField[currentWpIdx].imagesField;
                        var tmpImg = new Object();

                        tmpImg.idField = 0;             // this is a new image
                        tmpImg.imagedataField = null;
                        tmpImg.latitudeField = jsonTrailData[0].waypointsField[currentWpIdx].waypointField.latitudeField;
                        tmpImg.longitudeField = jsonTrailData[0].waypointsField[currentWpIdx].waypointField.longitudeField;
                        tmpImg.urlField = lastUploadedFileUrl;
                        tmpImg.trailIdField = jsonTrailData[0].waypointsField[currentWpIdx].waypointField.idField;
                        tmpImg.similarityScoreField = 0;

                        tmpImgArray.push(tmpImg);

                        collectPictures();
                        mycarousel.reset();

                        currentWpImgIdx = tmpImgArray.length - 1;

                        if (functionUpdateWaypointInfo) {
                            functionUpdateWaypointInfo();
                        }
                    }

                }
            }
        }

        functionFileUploadClose = function(fileUrl) {
            $("#dialog-addphoto-confirm").dialog('close');
        }

        function dialogAddPhoto() {
            lastUploadedFileUrl = null;
            var myIframe = $('#ifrUpload').each(function() {
                $(this).attr({ src: $(this).attr("src") });
            });
            $("#dialog-addphoto-confirm").dialog({
                resizable: true,
                width: 430,
                height: 150,
                modal: true
            });
        }

        // Waypoint update callback
        functionUpdateWaypointInfo = function() {
            if (jsonTrailData != null) {
                var tmp = jsonTrailData[0].waypointsField;
                if (tmp != null) {
                    if (currentWpIdx >= 0) {
                        $("#<%= divWaypointDetailsUnselected.ClientID %>").hide();
                        $("#<%= divWaypointDetailsSelected.ClientID %>").show();
                        $("#<%= btnDelPic.ClientID %>").show();
                        $("#<%= btnAddPic.ClientID %>").show();

                        // Update fields
                        $("#<%= lblWaypointNumber.ClientID %>").text(tmp[currentWpIdx].orderNumberField);
                        $("#<%= lblWaypointTitle.ClientID %>").text(tmp[currentWpIdx].waypointField.nameField);
                        $("#<%= lblWaypointDescription.ClientID %>").text(tmp[currentWpIdx].waypointField.descriptionField);

                        $("#<%= lblWaypointDescription.ClientID %>").text(tmp[currentWpIdx].waypointField.descriptionField);
                        $("#<%= txtWaypointDescription.ClientID %>").text(tmp[currentWpIdx].waypointField.descriptionField);

                        if (functionUpdateWaypointImage) {
                            functionUpdateWaypointImage(currentWpIdx, currentWpImgIdx);
                        }
                    } else {
                        $("#<%= btnDelPic.ClientID %>").hide();
                        $("#<%= btnAddPic.ClientID %>").hide();
                        $("#<%= divWaypointDetailsSelected.ClientID %>").hide();
                        $("#<%= divWaypointDetailsUnselected.ClientID %>").show();
                    }
                } else {
                    $("#<%= btnDelPic.ClientID %>").hide();
                    $("#<%= btnAddPic.ClientID %>").hide();
                    $("#<%= divWaypointDetailsSelected.ClientID %>").hide();
                    $("#<%= divWaypointDetailsUnselected.ClientID %>").show();
                }
            }
            mycarousel_updateAllItems();
        };

        // Waypoint update callback
        functionSaveData = function() {
            $("#<%=hfUploadedFiles.ClientID %>").val(JSON.stringify(uploadedFilesArray));
            if (jsonTrailData[0].waypointsField) {
                if (jsonTrailData[0].waypointsField.length > 0) {
                    jsonTrailData[0].waypointsField[0].waypointField.cityField = tmpCity;
                }
            }
        };

        function setNotAvailablePic() {
            $("#<%= imgDetailsPicture.ClientID %>").attr('src', '../images/photo_not_available.jpg');
            $("#<%= lnkSimilarImages.ClientID %>").hide();
            $("#<%= imgImage2.ClientID %>").attr('src', '../images/photo_not_available.jpg');
            $("#<%= imgDeletePic.ClientID %>").attr('src', '../images/photo_not_available.jpg');
            $("#<%= btnDelPic.ClientID %>").hide();
        }

        functionUpdateWaypointImage = function(wpIdx, wpImgIdx) {
            $("#<%= imgDetailsPicture.ClientID %>").attr('src', '../images/loading.gif');
            $("#<%= imgImage2.ClientID %>").attr('src', '../images/loading.gif');
            $("#<%= imgDeletePic.ClientID %>").attr('src', '../images/loading.gif');
            $("#<%= lnkSimilarTrails.ClientID %>").hide();
            $("#<%= lnkSimilarImages.ClientID %>").hide();

            if (jsonTrailData != null) {
                var tmp = jsonTrailData[0].waypointsField;
                if (tmp != null) {
                    if (currentWpIdx >= 0) {
                        if (tmp[wpIdx].imagesField != null && tmp[wpIdx].imagesField.length > 0 && currentWpImgIdx >= 0) {
                            $("#<%= imgDetailsPicture.ClientID %>").attr('src', tmp[wpIdx].imagesField[currentWpImgIdx].urlField.replace("type=image", "type=thumb"));

                            var tmpUrl = tmp[wpIdx].imagesField[currentWpImgIdx].urlField;
                            if (tmpUrl) {
                                var tmpImg = tmpUrl.substring(tmpUrl.indexOf("id="), tmpUrl.length);
                                if (tmpImg.indexOf('&') > 0)
                                    tmpImg = tmpImg.substring(3, tmpImg.indexOf('&'));
                                else
                                    tmpImg = tmpImg.substring(3, tmpImg.lenght);

                                var proUserId = $("#<%= hfProUserId.ClientID %>")[0].value;

                                $("#<%= lnkSimilarTrails.ClientID %>").show();
                                $("#<%= lnkSimilarTrails.ClientID %>").attr('href', 'TrailSearch2.aspx?trailid=' + jsonTrailData[0].idField + '&imageId=' + tmpImg + proUserId);
                                $("#<%= lnkSimilarImages.ClientID %>").show();
                                $("#<%= lnkSimilarImages.ClientID %>").attr('href', 'TrailSearch2Img.aspx?trailid=' + jsonTrailData[0].idField + '&imageId=' + tmpImg + proUserId);
                            }

                            $("#<%= imgImage2.ClientID %>").attr('src', tmp[wpIdx].imagesField[currentWpImgIdx].urlField.replace("type=image", "type=image"));
                            $("#<%= imgDeletePic.ClientID %>").attr('src', tmp[wpIdx].imagesField[currentWpImgIdx].urlField.replace("type=image", "type=thumb"));
                            $("#<%= btnDelPic.ClientID %>").show();
                        } else {
                            setNotAvailablePic();
                        }
                    } else {
                        setNotAvailablePic();
                    }
                } else {
                    setNotAvailablePic();
                }
            } else {
                setNotAvailablePic();
            }
        };

        functionUpdateWaypointOrder = function() {
            collectPictures();
            mycarousel.reset();
        };

        function collectPictures() {
            wpImgArray = new Array();

            // We must traverse the trail and collect all the pictures
            if (jsonTrailData) {
                if (jsonTrailData.length > 0) {
                    if (jsonTrailData[0].waypointsField) {
                        for (var i = 0; i < jsonTrailData[0].waypointsField.length; i++) {
                            var tmpWP = jsonTrailData[0].waypointsField[i];
                            if (tmpWP.imagesField) {
                                for (var j = 0; j < tmpWP.imagesField.length; j++) {
                                    var tmpWPImg = tmpWP.imagesField[j];
                                    var wpImgObj = new Object();

                                    wpImgObj.url = tmpWPImg.urlField
                                    wpImgObj.name = tmpWP.waypointField.nameField
                                    wpImgObj.wpIdx = i;
                                    wpImgObj.wpImgIdx = j;

                                    wpImgArray.push(wpImgObj);
                                }
                            }
                        }
                    }
                }
            }
        }

        var tmpCity;

        $(document).ready(function() {
            // Select first waypoint if there is one
            if (jsonTrailData[0].waypointsField != null && jsonTrailData[0].waypointsField.length > 0) {
                currentWpIdx = 0;
                currentWpImgIdx = 0;
            }
            else {
                currentWpIdx = -1;
                currentWpImgIdx = 0;
            }

            uploadedFilesArray = new Array();
            collectPictures();

            // Setup UI
            $('#<%=txtDate.ClientID %>').datepicker({
                numberOfMonths: 1,
                showButtonPanel: true
            });

            $('#<%=btnAddPic.ClientID %>').button();
            $('#<%=btnDelPic.ClientID %>').button();
            $('#<%=btnSendComment.ClientID %>').button();

            $('#<%=divPicCommands.ClientID %>').position({
                of: $('#<%=divPic.ClientID %>'),
                my: 'center bottom',
                at: 'center bottom',
                offset: '0 0'
            });

            $('#<%=sltLayers.ClientID %>').selectList({
                onAdd: function(select, value, text) {
                    if (jsonTrailData.length > 0) {
                        if (jsonTrailData[0].layersField == null)
                            jsonTrailData[0].layersField = new Array();
                        jsonTrailData[0].layersField.push(value);
                    }
                },
                onRemove: function(select, value, text) {
                    if (jsonTrailData.length > 0) {
                        if (jsonTrailData[0].layersField == null)
                            jsonTrailData[0].layersField = new Array();
                        jsonTrailData[0].layersField = jQuery.grep(jsonTrailData[0].layersField, function(v) {
                            return v != value;
                        });
                    }
                }
            });

            // Set images carousel
            $("#<%=mycarousel.ClientID %>").jcarousel({
                scroll: 6,
                itemLoadCallback: { onBeforeAnimation: mycarousel_itemLoadCallback }
            });

            $("#<%=txtDate.ClientID %>").change(function() {
                var tmp = $("#<%=txtDate.ClientID %>");
                var tmpDate = $('#<%=txtDate.ClientID %>').datepicker("getDate");
                if (tmpDate != null) {
                    // TODO: Fix this
                    //                    jsonTrailData[0].createdField = tmpDate;
                }
            });

            $("#<%=txtTrailTitle.ClientID %>").keyup(function() {
                var tmp = $("#<%=txtTrailTitle.ClientID %>");
                if (tmp.length > 0)
                    jsonTrailData[0].titleField = tmp[0].value;
            });

            $("#<%=txtTrailDescription.ClientID %>").keyup(function() {
                var tmp = $("#<%=txtTrailDescription.ClientID %>");
                if (tmp.length > 0)
                    jsonTrailData[0].descriptionField = tmp[0].value;
            });

            $("#<%=txtTrailCity.ClientID %>").keyup(function() {
                var tmp = $("#<%=txtTrailCity.ClientID %>");
                tmpCity = tmp[0].value;
                if (jsonTrailData[0].waypointsField) {
                    if (jsonTrailData[0].waypointsField.length > 0) {
                        jsonTrailData[0].waypointsField[0].waypointField.cityField = tmp[0].value;
                    }
                }
            });

            $("#<%=txtWaypointDescription.ClientID %>").keyup(function() {
                if (currentWpIdx >= 0) {
                    var wp = jsonTrailData[0].waypointsField[currentWpIdx];
                    var descr = $("#<%=txtWaypointDescription.ClientID %>");
                    wp.waypointField.descriptionField = descr[0].value;
                }
            });

            $("#<%=chkIsPublic.ClientID %>").change(function() {
                if ($(this).attr("checked")) {
                    jsonTrailData[0].publicTrailField = true;
                } else {
                    jsonTrailData[0].publicTrailField = false;
                }
            });

            if (functionUpdateWaypointInfo) {
                functionUpdateWaypointInfo();
            }

        });
    </script>

</asp:Content>
